/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-05-30 10:15:54
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2022-09-27 16:23:46
 * @FilePath: \reconfiguration-administration\src\Login\LoginStyle\LoginStyle004.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import '../Scss/MuTiLoginPage.scss'
import { lazy, Suspense, useState } from 'react'
import { commonUrl } from '../../Configure/CommonParameter'
import { v4 as uuidv4 } from 'uuid'
import { PlugInUnit } from '../PlugInUnit'

const SignUp = lazy(() => import('../SignUp'))
const CodeUp = lazy(() => import('../CodeUp'))

const MuTiLoginPage = ({ imageUrl, codeState, toggle, uuid, title }) => {
    const [QRUuid] = useState(uuidv4())
    return (
        <Suspense fallback={<div>龙丰母体实验室Login...</div>}>
            <div className="MuTiLoginPage">
                <img className="LoginBack" src={`${imageUrl}LoginBack.png`} alt="" />
                <img className="LoginTop" src={`${imageUrl}LoginTop.png`} alt="" />
                <img className="LoginBtm" src={`${imageUrl}LoginBtm.png`} alt="" />
                <div className="LoginBox">
                    {/* <img className='LoginBoxBack' src={`${imageUrl}LoginInput.png`} alt="" /> */}
                    <div className="title">{title}</div>
                    <div className="codeTables">
                        {codeState ? (
                            <img src={`${commonUrl}二维码.png`} alt="" onClick={toggle} />
                        ) : (
                            <img src={`${commonUrl}密码码.png`} alt="" onClick={toggle} />
                        )}
                    </div>
                    <div className="SingUp">
                        {codeState ? (
                            <CodeUp
                                codeState={codeState}
                                codeStyle={commonUrl + 'code.css'}
                                QRUuid={QRUuid}
                                ProjectUuid={uuid}
                            />
                        ) : (
                            <SignUp />
                        )}
                        <PlugInUnit />
                    </div>
                </div>
            </div>
        </Suspense>
    )
}
export default MuTiLoginPage
